<template>
  <base-breadcrumb :breadcrumb="!isAudit">
    <a-card :bordered="false" style="over-flow:scroll">
      <title-name title="查看设计策划计划表"></title-name>
      
      <a-form-model :rules="rules" :model="form" ref="ruleForm"
                          :labelCol="{lg: {span: 6}, sm: {span:6}}"
                          :wrapperCol="{lg: {span: 18}, sm: {span: 18} }">
        <a-row>
          <a-col :md="8" :sm="8">
            <a-form-model-item label="分公司"
                          :labelCol="{lg: {span: 6}, sm: {span:6}}"
                          :wrapperCol="{lg: {span: 18}, sm: {span: 18} }" prop="branchCompany">
               <BaseInput v-model="form.branch" disabled  />
              <!-- <SelectSubCompany placeholder="请选择" v-model="form.branchCompany"  disabled></SelectSubCompany> -->
            </a-form-model-item>
          </a-col>
          <a-col :md="8" :sm="8">
            <a-form-model-item label="项目名称" prop="projectId">
               <BaseInput v-model="form.projectName" disabled  />
              <!-- <a-select @focus="getProjectTypes" :getPopupContainer="getPopupContainer" disabled    @change="changeProjectType(form.projectId)" v-model="form.projectId"  >
              <a-select-option v-for="item in projectList" :key="item.projectId" :value="item.projectId">{{item.projectName}}
              </a-select-option>
            </a-select> -->
            </a-form-model-item>
          </a-col>
          <a-col :md="8" :sm="8">
            <a-form-model-item
                    label="项目编号" prop="num">
              <BaseInput v-model="form.num" disabled  />
            </a-form-model-item>
          </a-col>
          <a-col :md="8" :sm="8">
            <a-form-model-item
                    label="项目设计管理类别" prop="designType" >
              <BaseInput v-model="form.designType" disabled  />
            </a-form-model-item>
          </a-col>
          <a-col :md="8" :sm="8">
            <a-form-model-item
                    label="项目进场时间" prop="inTime">
              <a-date-picker :disabled="type=='view'   || type=='approve'"  v-model="form.inTime" @change="changeTime"></a-date-picker>
            </a-form-model-item>
          </a-col>
          <a-col :md="8" :sm="8">
            <a-form-model-item
                    label="创建人" prop="personName">
              <BaseInput v-model="form.personName" disabled></BaseInput>
            </a-form-model-item>
          </a-col>
          <a-col :md="8" :sm="8">
            <a-form-model-item
                    label="创建时间" prop="member">
              <BaseInput v-model="form.time" disabled></BaseInput>
            </a-form-model-item>
          </a-col>
          <!-- <a-col :sm="7" :md="7" >
            <a-form-model-item label="签字编码"
                         :labelCol="{ lg: { span: 6 }, sm: { span: 6 } }"
                         :wrapperCol="{ lg: { span: 18 }, sm: { span: 18 } }">
              <BaseInput :disabled="type=='view'   || type=='approve'" placeholder="请输入编码" v-model="form.signCode"></BaseInput>
            </a-form-model-item>
          </a-col>
          <a-col  :sm="2" :md="2">
            <a-button :disabled="type=='view'|| type=='approve'" type="primary" style="margin:0 10px">确定签字</a-button>
          </a-col> -->
          <!-- <a-col  :sm="6" :md="6">
          <BaseInput type="textarea"></BaseInput>
          </a-col> -->
          
        </a-row>
      </a-form-model>
      
      <div>
        <a-row>
          <a-col :md="24" :sm="19">
            <a-table
                    ref="table"
                    rowKey="row.id"
                    :columns="columns"
                    :pagination=false
                    :data-source="tableData" >
              <span slot="serial" slot-scope="text, record, index">{{ index + 1 }}</span>
              <span slot="posts" slot-scope="text, record,index">
                <ellipsis :length="20" tooltip>{{ text }}</ellipsis>
              </span>
            </a-table>
          </a-col>
        </a-row>
      </div>
    
    </a-card>

    <!--<a-card  v-if="type=='approve'">-->
      <!--<title-name title="审批信息"></title-name>-->
      <!--<a-form>-->
        <!--<a-row>-->
          <!--<a-col  :md="8" :sm="8">-->
            <!--<a-form-item label="最后审批结果" -->
                         <!--:labelCol="{ lg: { span: 6 }, sm: { span: 6 } }"-->
                         <!--:wrapperCol="{ lg: { span: 18 }, sm: { span: 18 } }">-->
              <!--<BaseInput disabled></BaseInput>-->
            <!--</a-form-item>-->
          <!--</a-col>-->
          <!--<a-col  :md="8" :sm="8">-->
            <!--<a-form-item label="最后审批时间" -->
                         <!--:labelCol="{ lg: { span: 6 }, sm: { span: 6 } }"-->
                         <!--:wrapperCol="{ lg: { span: 18 }, sm: { span: 18 } }">-->
              <!--<BaseInput disabled></BaseInput>-->
            <!--</a-form-item>-->
          <!--</a-col>-->
        <!--</a-row>-->
      <!--</a-form>-->
      <!--<title-name title="审批流程信息"></title-name>-->

      <!--<a-table pagination="false" bordered row-key="id" :columns="columnApprove"   :data-source="dataSource">-->
        <!--<span slot="operation" slot-scope="text, record">-->
        <!--<template>-->
          <!--<a @click="handleSub(record)">查看</a>-->
        <!--</template>-->
      <!--</span>-->
      <!--</a-table>-->

    <!--</a-card>-->


    <div v-if="!isConsultation" class="footer page-btn-right-top">
      <a-button type="default"  @click="goBack">关闭</a-button>
    </div>
    
    <a-modal
            :title="titleName"
            :visible="visible"
            :confirm-loading="confirmLoading"
            width="1000px"
            @ok="handleOk"
            @cancel="handleCancel">
      <a-form-model  :rules="rules1" :model="formAdd" ref="ruleForm1">
        <a-row>
          <a-col :md="12" :sm="12">
            <a-form-model-item
                    label="计划事项"
                    :labelCol="{ lg: { span: 6 }, sm: { span: 6 } }"
                    :wrapperCol="{ lg: { span: 18 }, sm: { span: 18 } }" prop="matter">
              <BaseInput v-model="formAdd.matter" :disabled="type=='view'"  placeholder="请输入" />
            </a-form-model-item>
          </a-col>
          
          <a-col
                  :md="12" :sm="12">
            <a-form-model-item
                    label="计划时间"
                    :labelCol="{ lg: { span: 6 }, sm: { span: 6 } }"
                    :wrapperCol="{ lg: { span: 18 }, sm: { span: 18 } }" prop="time"> 
              <a-date-picker v-model="formAdd.time" :disabled="type=='view'" @change="changeTimes"></a-date-picker>
            </a-form-model-item>
          </a-col>
          <a-col :md="12" :sm="12">
            <a-form-model-item
                    label="责任人"
                    :labelCol="{ lg: { span: 6 }, sm: { span: 6 } }"
                    :wrapperCol="{ lg: { span: 18 }, sm: { span: 18 } }" prop="personId"> 
              <a-select show-search :filter-option="filterOption" :getPopupContainer="getPopupContainer" :disabled="type=='view'"  v-model="formAdd.personId" @change="changePerson" >
                <a-icon slot="suffixIcon" type="search" />
                <a-spin v-if="loading" slot="notFoundContent" size="small" />
                <a-select-option v-for="item in personList" :key="item.id">{{item.name}}</a-select-option>
              </a-select>
              <!-- <SelectDutyPeople @change="changePerson" :form="formAdd" keyValue="branchId" placeholder="请选择" v-model="formAdd.person" :isClear="false"></SelectDutyPeople> -->
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-modal>

    <a-modal width="700px" v-model="approveVisible" title="审批信息详情" >
          <template slot="footer">
            <a-button key="back" @click="handleCancel">
              关闭
            </a-button>
          </template>
          <a-form :model="formApprove"  ref="form2">
            <a-row :gutter="24">
              <a-col :md="24" :sm="24">
                <a-form-item
                        label="审批意见"
                        :labelCol="{ lg: { span: 5 }, sm: { span: 5 } }"
                        :wrapperCol="{ lg: { span: 18 }, sm: { span: 18 } }">
                  <BaseInput type="textarea" v-model="formApprove.remark" disabled/>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :md="12" :sm="12">
                <a-form-item
                        label="审批人"
                        :labelCol="{ lg: { span: 5 }, sm: { span: 5 } }"
                        :wrapperCol="{ lg: { span: 18 }, sm: { span: 18 } }">
                  <BaseInput v-model="formApprove.replier" disabled/>
                </a-form-item>
              </a-col>
              <a-col :md="12" :sm="12">
                <a-form-item
                        label="审批时间"
                        :labelCol="{ lg: { span:5 }, sm: { span: 5 } }"
                        :wrapperCol="{ lg: { span: 18 }, sm: { span: 18 } }">
                  <BaseInput v-model="formApprove.contactInfo" disabled />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :md="12" :sm="12">
                <a-form-item
                        label="节点名称"
                        :labelCol="{ lg: { span: 5 }, sm: { span: 5 } }"
                        :wrapperCol="{ lg: { span: 18 }, sm: { span: 18 } }">
                  <BaseInput v-model="formApprove.replier" disabled />
                </a-form-item>
              </a-col>
              <a-col :md="12" :sm="12">
                <a-form-item
                        label="滞留时间"
                        :labelCol="{ lg: { span:5 }, sm: { span: 5 } }"
                        :wrapperCol="{ lg: { span: 18 }, sm: { span: 18 } }">
                  <BaseInput v-model="formApprove.contactInfo" disabled />
                </a-form-item>
              </a-col>
            </a-row>

          </a-form>
        </a-modal>
  </base-breadcrumb>
</template>

<script>
  import { STable, Ellipsis } from '@/components'
  import {addBasic ,getProjectType,getDetails ,getMattersByproject ,editBasic ,deleteMattes} from '@/api/design/plotsPlan'
  import { getDepartConfig, getJobStaff, getUserBranch, getUserProject } from '@/api/project/projects'
  import { getDesignType,getProjectsDel} from '@/api/project/projects'
  import { themeChoose } from '@/mixin/mixin'
  import SelectSubCompany from '@/components/Select/SelectSubCompany' // 分公司
  import SelectProject from '@/components/Select/SelectProject' // 项目
  import { getStaffAll } from '@/api/subassembly/TreeSelectOrganization';
  import SelectDutyPeople from '@/components/Select/SelectDutyPeople'
  import { getAuditProject} from '@/api/themeChoose/themeChoose'
  
import { getOrgUsers } from '@/api/commons'
  const columns = [
    {
      title: '序号',
      dataIndex: 'serial',
      scopedSlots: { customRender: 'serial' }
    },
    {
      title: '计划事项',
      dataIndex: 'matter'
    },
    {
      title: '计划时间',
      dataIndex: 'time',

    },
    {
      title: '责任人',
      dataIndex: 'person',

    },
    {
      title: '责任人员工编号',
      dataIndex: 'personNum',
    },
    {
      title: '责任人岗位',
      dataIndex: 'posts',
      scopedSlots: { customRender: 'posts' }
    },
    {
      title: '操作',
      dataIndex: 'action',
      width: '150px',
      scopedSlots: { customRender: 'action' }
    }
  ]
 
  const  columnApprove = [
    {
      title: '审批序号',
      scopedSlots: { customRender: 'serial' }
    },
    {
      title: '审批人',
      dataIndex: '',
    },
    {
      title: '审批时间',
      dataIndex: '',
    },
    {
      title: '节点名称',
      dataIndex: '',
    },
    {
      title: '滞留时间',
      dataIndex: '',
    },
    {
      title: '审批意见',
      dataIndex: '',
    },
    {
      title: '操作',
      dataIndex: 'operation',
      scopedSlots: { customRender: 'operation' }
    }
  ]

  export default {
    name:'a'+ Date.now(),
    mixins:[themeChoose],
    components:{
      STable,
      SelectDutyPeople,
      SelectSubCompany
    },
    props: {
      // 是否作为审批详情
      isAudit: {
        type: Boolean,
        default: false
      },
      // 是否作为意见征询
      isConsultation: {
        type: Boolean,
        default: false
      }
    },
    data(){
      this.columns = columns
      return{
        // 查询参数
        queryParam: {},
        // 加载数据方法 必须为 Promise 对象
        // tableData: parameter => {
          // const requestParameters = Object.assign({}, parameter, this.queryParam)
          // return getScoreList(requestParameters)
          //   .then(res => {
          //     return res
          //   })
        // },
        selectedRowKeys:'',
        formAdd:{},
        selectedRows:'',
        type:'',
        personList:[],
        loading:false,
        dataSource:[],
        tableData:[],
        tableData1:[
          {matter:'设计策划启动',id:'1'},
          {matter:'提交商务盈亏分析（导向分析）',id:'2'},
          {matter:'设计策划（设计策划书初稿、设计优化立项计划）评审',id:'3'},
        ],
        tableData2:[
          {matter:'《设计策划书》上报评审',id:'4'}
        ],
        confirmLoading:false,
        projectNames:[],
        approveVisible:false,
        projectList:[],
        id:'',
        name:'',
        basic:{
          branchCompany:'',
          projectName:'',
          num:'',
          designType:'',
          inTime:'',
          person:'',
          time:'',
        },
        plan:{},
        resList:[],
        recordForm:[],
        columnApprove,
        titleName:'',
        orgTree:[],
        formApprove:{},
        status:'',
        pageType:'',
        jobsList:[],
        form:{
          time:this.getNowTime()
        },
        visible:false,
        id:'',
        orgId:'',
        selectedRowKeys:[],
        selectedRows:[],
        rules: {
            inTime: [{ required: true, message: '请选择项目进场时间', trigger: 'change' }],
            branchCompany: [{ required: true, message: '请选择分公司', trigger: 'change' }],
            projectId: [{ required: true, message: '请选择项目', trigger: 'change' }],
        },
        rules1: {
            matter: [{ required: true, message: '请填写计划事项', trigger: 'blur' }],
            time: [{ required: true, message: '请选择计划时间', trigger: 'change' }],
            personId: [{ required: true, message: '请选择责任人', trigger: 'change' }],
        },
      }
    },
    created() {
      this.form.personName = JSON.parse(sessionStorage.getItem('ycloud-user_info')).employee.name
      this.orgId = JSON.parse(sessionStorage.getItem('ycloud-user_info')).orgId
      this.id = this.$route.query.id
      this.type = this.$route.query.type
      if(this.id){
        this.getDetails()
        this.getProjectTypes()
        console.log(this.projectList)
      }
      
      // this.getorgTree()
    },
    methods:{
      handleSub(record,type){
        this.approveVisible = true
        this.type = type
        this.formApprove = record
      },
      onSelectChange(selectedRowKeys,selectedRows) {
        console.log('selectedRows: ', selectedRows);
        console.log('selectedRowKeys changed: ', selectedRowKeys);
        this.selectedRowKeys = selectedRowKeys;
        this.selectedRows = selectedRows
      },
      changePerson(value){
        console.log(value)
        let arr = []
        arr=this.personList.filter(item=>item.id==value)[0]
        console.log(arr)
        this.formAdd.person = arr.name
        this.formAdd.personNum = arr.jobNum
      },
      save(){
        console.log(this.form)
        // addBasic(this.basic).then((res)=>{
        //   if(res){
        //     this.$message.success("保存成功")
        //   }
        // })
      },
      getOrgUsers(){
        this.loading=true
        getOrgUsers({orgId:this.orgId}).then(res=>{
          this.personList = res.data
          this.loading=false
        })
      },
      getStaffAll(){
        getStaffAll({orgId:this.orgId}).then(res=>{
          this.resList = res.data
        })
      },
      getDetails(){
        if(this.id){
          getDetails({id:this.id}).then(res=>{
            this.form = res.data
            this.form.branchCompany = res.data.branchId
            
          getAuditProject({branchComIds:[this.form.branchCompany],pageNo:1,pageSiae:1000,designTypeNames:['C类','B类'],ifDesignPlan:0,auditStatus:2}).then(res=>{
            this.projectList = res.data
            let arr = {}
            arr={
              name:this.form.projectName,
              designTypeName:this.form.designType,
              designTypeId:this.form.designTypeId,
              projectNumber:this.form.num,
              code:this.form.projectId,
            }
            this.projectList.push(arr)
            console.log(this.projectList)
          })
          })
          getMattersByproject({id:this.id}).then(res=>{
            this.tableData = res.data
          })
        }
      },
      getPopupContainer(triggerNode){
        return  triggerNode.parentNode
      },
      goDel(){
        console.log(this.selectedRowKeys)
        this.selectedRows.forEach(delItem=>{
          console.log(delItem)
          this.tableData = this.tableData.filter(items=>items.id!=delItem.id)
          console.log(this.tableData)
        })
      },
      onChange(value){
      
      },
      changeTime(value,dateString){
        this.form.inTime = dateString
      },
      changeTimes(value,dateString){
        this.formAdd.time = dateString
      },
      selectType(value){
        console.log(value)
      },
      filterOption(input, option) {
        return (
          option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
        );
      },
      changeProjectType(value){
        this.tableData = []
        console.log(value)
        let arr=[]
        arr.push(value)
        getProjectType({projectIds:arr}).then(res=>{
          console.log(res.data[0])
          this.form.num = res.data[0].projectNumber
          this.form.designType = res.data[0].designTypeName
          this.form.designTypeId = res.data[0].designTypeId
          if(this.form.designType=="B类"){
            this.tableData.push(
          {matter:'设计策划启动',id:'1'},
          {matter:'提交商务盈亏分析（导向分析）',id:'2'},
          {matter:'设计策划（设计策划书初稿、设计优化立项计划）评审',id:'3'}
          )
          }else if(this.form.designType=="C类"){
            this.tableData.push(
              {matter:'《设计策划书》上报评审',id:'4'}
            )
          }

        })
        // this.form.designType = this.form.typeList.designTypeName
        // this.form.num = this.form.typeList.projectNumber
      },
      getProjectTypes(){
        this.loading=true
        getAuditProject({branchComIds:[this.form.branchCompany],pageNo:1,pageSiae:1000,designTypeNames:['C类','B类'],ifDesignPlan:0,auditStatus:2}).then(res=>{
          this.projectList = res.data
          this.loading=false
        })
      },
      getPosts(value) {
        this.projectId = value
      },
      getorgTree(){
        getorgTree().then((res)=>{
          console.log(res)
          this.orgTree = res.data
        })
      },
      onSelectChange(selectedRowKeys, selectedRows) {
        console.log(selectedRowKeys)
        console.log(selectedRows)
        this.selectedRowKeys = selectedRowKeys
        this.selectedRows = selectedRows
      },
      // 保存草稿---提交
      saveForm(type){
        this.tableData.forEach(item=>{
          item.id=null
        })
        this.form.list = this.tableData
        console.log(this.form)
          this.form.statusCode = '0' 
          if(this.id){
            editBasic(this.form).then(res=>{
              this.$multiTab.close(this.$route.fullpath)
              if(res.code='200'){
                this.$message.success("保存成功")
              }
            })
          }else{
            addBasic(this.form).then(res=>{
              this.$multiTab.close(this.$route.fullpath)
              if(res.code='200'){
                    this.$message.success("新增成功")
              }
            })
          }
      },
      saveSubmit(){
        this.$refs.ruleForm.validate(valid=>{
          if(valid){
            this.tableData.forEach(item=>{
              item.id=null
            })
            this.form.list = this.tableData
            console.log(this.form)
              this.form.statusCode = '1' 
              if(this.id){
                editBasic(this.form).then(res=>{
                  this.$multiTab.close(this.$route.fullpath)
                  if(res.code='200'){
                    this.$message.success("保存成功")
                  }
                })
              }else{
                addBasic(this.form).then(res=>{
                  this.$multiTab.close(this.$route.fullpath)
                  if(res.code='200'){
                        this.$message.success("新增成功")
                  }
                })
              }
          }
        })
      },
      search(){
        this.$refs.table.refresh(true)
      },
      goAdd(){
        this.titleName = '新增计划项'
        this.visible = true
        this.getStaffAll()
        this.getOrgUsers()
        this.formAdd = {}
      },
      // 关闭
      goBack(){
        window.close()
      },
      handleSub(record,type){
        this.visible = true
        this.type = type
        this.form = record
      },
      handleEdit(record){
        this.recordForm = JSON.parse(JSON.stringify(this.tableData))
        this.titleName= '编辑计划项'
        this.visible = true
        this.formAdd = record
        this.getStaffAll()
        this.getOrgUsers()
        console.log(this.formAdd)
      },
      handleOk(){
        this.$refs.ruleForm1.validate(valid=>{
          if(valid){
            this.visible = false
            if(this.id){
              if(this.formAdd.id){

              }else{
                this.formAdd.id =parseInt(this.tableData.length) +5 
                this.tableData.push(this.formAdd)
              }
            }else{
              if(this.formAdd.id){

              }else{
                this.formAdd.id = parseInt(this.tableData.length) +5 
                this.tableData.push(this.formAdd)
              }
              console.log(this.tableData)
            }
          }
        })
      },
      handleCancel(){
        console.log(this.formAdd.id)
        if(this.formAdd.id){
        this.tableData = this.recordForm
        }
        this.visible = false
      }
    }
  }
</script>

<style scoped>
  .input{
    width:100%
  }
  .footer{
    float:right;
    margin-right:10px
  }
  .footer button{
    margin-left:10px
  }
</style>
